
var coinImage = new Image();
coinImage.src = "images/coin-sprite-animation.png";


var canvas = document.getElementById("coinAnimation");
canvas.width = 1000;
canvas.height = 1000;

var i=0, j=0;
var k=100,l=0;
var check=0,count=0;
var check2=0,count2=0;
var start = true;
function gameLoop () 
{
  window.requestAnimationFrame(gameLoop);
  
	
				if(check==0)
				{					    
				coin.update();	
				coin.render();	
				}
					else 
					{
						coin.remove();
						check=0;
						count=0;
	
					}
						

if(check2==0)
{
coin2.update2();
coin2.render2();	
}	  
	else
	{
		coin2.remove2();
		check2=0;	
		count=0;
		
	}

 
}


function tabclick(e)
{
	tapX = e.targetTouches ? e.targetTouches[0].pageX : e.pageX,
	tapY = e.targetTouches ? e.targetTouches[0].pageY : e.pageY;

	if (tapX >= i && tapX <= i + 100) 
		{
			if (tapY >= j && tapY <= j + 100) 
			{
				count++;
				check = 1;
				if (count == 2) 
				{
					count = 0;
					check = 0;
					//coin.restart();
					
				}

			}
			
			if(count>1)
					{
						coin.restart();
					}
	    }	
			

if (tapX >= k && tapX <= k + 100) 
{
			if (tapY >= l && tapY <= l + 100) 
			{
				count ++;
				check2 = 1;
				if (count == 2) 
				{
					count = 0;
					check2 = 0;
					
				}

			}
					if(count>1)
					{
						coin2.restart2();
					}	

}
	    



};
   
   
   			




// Start the game loop as soon as the sprite sheet is loaded
coinImage.addEventListener("load", gameLoop);
canvas.addEventListener("mousedown",tabclick);



var coin = sprite({
    context: canvas.getContext("2d"),
    width: 1000,
    height: 1000,
    image: coinImage,
    numberOfFrames: 10,
    ticksPerFrame: 4
});


function sprite (options) 
{			
   var that = {},
        frameIndex = 0,
        tickCount = 0,
        ticksPerFrame = options.ticksPerFrame || 0;
        numberOfFrames = options.numberOfFrames || 1;
 	
    that.context = options.context;
    that.width = options.width;
    that.height = options.height;
    that.image = options.image;
    that.loop = options.loop;

        that.update = function () 
    {
        tickCount += 1;			
        if (tickCount > ticksPerFrame) 
        {
        	tickCount = 0;
       	// If the current frame index is in range
            if (frameIndex < numberOfFrames - 1) 
       		{ frameIndex += 1; /*Go to the next frame*/ } 
             	else if (that.loop) 
             	{ frameIndex = 0; } 
	       			else
	       			{ frameIndex=!1; }
       }
    };
    	that.render = function () 
    	{ 
    		
  			 /* Clear the canvas*/
   			 that.context.clearRect(i, j, that.width, that.height);
			    // Draw the animation     
			    that.context.drawImage( 
			    	that.image,          
					frameIndex * that.width / numberOfFrames,
			           0,
			           that.width / numberOfFrames, 
			           that.height,
			           i, 
			           j,
			           that.width / numberOfFrames,
			 			that.height);
 		};
 		
 		that.remove = function()
 		{
 			that.context.clearRect(i, j, 100, that.height);
 			i=6000;
 			j=6000;

 		};
 		
 		that.restart = function() 
 		{
			that.context.clearRect(i, j, 100, that.height);
			i = 0;
			j = 0;
 		};
 		
    return that;
}










var coin2 = sprite2({
    context: canvas.getContext("2d"),
    width: 1000,
    height: 1000,
    image: coinImage,
    numberOfFrames2: 10,
    ticksPerFrame2: 2
});


function sprite2 (options) 
{			
   var that = {},
        frameIndex2 = 0,
        tickCount2 = 0,
        
        ticksPerFrame2 = options.ticksPerFrame2 || 0;
        numberOfFrames2 = options.numberOfFrames2 || 1;
 	
    that.context = options.context;
    that.width = options.width;
    that.height = options.height;
    that.image = options.image;
    that.loop = options.loop;

        that.update2 = function () 
    {
        tickCount2 += 1;			
        if (tickCount2 > ticksPerFrame2) 
        {
        	tickCount2 = 0;
       	// If the current frame index is in range
            if (frameIndex2 < numberOfFrames2 - 1) 
       		{ frameIndex2 += 1; /*Go to the next frame*/ } 
             	else if (that.loop) 
             	{ frameIndex2 = 0; } 
	       			else
	       			{ frameIndex2=!0; }
       }
    };
    	that.render2 = function () 
    	{ 
    		
  			 /* Clear the canvas*/
   			 that.context.clearRect(k, l, that.width, that.height);
			    // Draw the animation     
			    that.context.drawImage( 
			    	that.image,          
					frameIndex2 * that.width / numberOfFrames2,
			           0,
			           that.width / numberOfFrames2, 
			           that.height,
			           k, 
			           l,
			           that.width / numberOfFrames2,
			 			that.height);
 		};
 		
 		that.remove2 = function()
 		{
 			that.context.clearRect(k, l, that.width, that.height);
 			k=6000;
 			l=6000;
 		};
 		
 		that.restart2 = function() 
 		{
 		
		that.context.clearRect(k, l, 100, that.height);
		k = 100;
		l = 0;
		//a=i;b=j;
	};
 		
    return that;
}



